<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 的 CSS 文件 -->
    <link href="public/static/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="public/static/node_modules/bootstrap-icons/font/bootstrap-icons.css">

    <script type="text/javascript" src="public/static/node_modules/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="public/static/node_modules/layer-src/dist/layer.js"></script>
    <script type="text/javascript">
		var myloading = layer.msg('加载中', {
			icon: 16
			,shade: 0.01
			,time: false
		});

		window.setInterval(function () {
			if (window.document.readyState == "complete") { 
				layer.close(myloading);
			} 
		}, 700);
    </script>

    <title>后台首页</title>
  </head>
  <body class="pt-5">
    <div id="nav-div"></div>

    <div class="container-fluid pt-3">
      <div class="row">
        <div class="col-md-8">

          <div class="row">

            <div class="col-6 col-md-3">
              <div class="card mt-3 text-center">
                <div class="card-body">
                  <p>今日访问人数</p>
                  <h4 class="card-title"><b id="today-user-num"></b></h4>
                </div>
              </div>
            </div>

            <div class="col-6 col-md-3">
              <div class="card mt-3 text-center">
                <div class="card-body">
                  <p>用户数量</p>
                  <h4 class="card-title"><b id="all-user-num"></b></h4>
                </div>
              </div>
            </div>

            <div class="col-6 col-md-3">
              <div class="card mt-3 text-center">
                <div class="card-body">
                  <p>角色数量</p>
                  <h4 class="card-title"><b id="all-role-num"></b></h4>
                </div>
              </div>
            </div>

            <div class="col-6 col-md-3">
              <div class="card mt-3 text-center">
                <div class="card-body">
                  <p>节点数量</p>
                  <h4 class="card-title"><b id="all-node-num"></b></h4>
                </div>
              </div>
            </div>

          </div>

          <div class="row">
            <div class="col">
              <div class="card mt-3">
                <div class="card-header">
                  用户活跃度（登录次数）
                </div>
                <div class="card-body">
                  <div style="width: 100%; height: 25rem;" id="activity-table"></div>
                </div>
              </div>
            </div>
          </div>

        </div>

        <div class="col-md-4">

          <div class="row">
            <div class="col">
              <div class="card mt-3">
                <div class="card-header">
                  公告栏
                </div>
                <ul class="list-group list-group-flush" id="notice-list">
                </ul>
              </div>
            </div>
          </div>
          
        </div>

      </div>
      <hr>
    </div>

    <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
      <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <strong class="me-auto">公告 <i class="bi bi-megaphone-fill"></i></strong>
          <small id="notice_create_time"></small>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
          <h5 id="notice_title">Hello, world! This is a toast message.</h5>
          <p class="mb-0" id="notice_content">Hello, world! This is a toast message.</p>
        </div>
      </div>
    </div>
    


    <!-- 包含 Popper 的 Bootstrap 集成包 -->
    <script src="public/static/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="public/static/node_modules/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="public/static/common/js/index.js"></script>
    

    <script type="text/javascript">
      // 时间戳转换格式化时间
      function getdate(value) {
        if (value) {
          let date = new Date(parseInt(value)*1000);
          var YY = date.getFullYear() + '-';
          var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
          var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
          var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
          var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
          var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
          return YY + MM + DD +" "+hh + mm + ss;
        } else {
          return null;
        }
      }

      function showNotice(id) {
        $.ajax({
            url: '?m=admin&c=Notice&a=getNoticeById',
            type: 'post',
            dataType: 'json',
            data: {id: id},              
            success: function(data){
              if (data) {
                $('#notice_create_time').text(getdate(data.data.create_time));
                $('#notice_title').text(data.data.title);
                $('#notice_content').text(data.data.content);
                $('#liveToast').toast('show');
              }
            }
        });
      }

      $(document).ready(function() {
        // 导航栏
        $('#nav-div').load("public/static/common/navbar/navbar-admin.html");

        $.ajax({
            url: '?m=admin&c=User&a=getUserNum',
            type: 'post',
            dataType: 'json',
            data: {},              
            success: function(data){
                $('#all-user-num').text(data);
            }
        });

        $.ajax({
            url: '?m=admin&c=User&a=getUserNumHasLoginToday',
            type: 'post',
            dataType: 'json',
            data: {},              
            success: function(data){
                $('#today-user-num').text(data);
            }
        });

        $.ajax({
            url: '?m=admin&c=Role&a=getRoleNum',
            type: 'post',
            dataType: 'json',
            data: {},              
            success: function(data){
                $('#all-role-num').text(data);
            }
        });

        $.ajax({
            url: '?m=admin&c=Node&a=getNodeNum',
            type: 'post',
            dataType: 'json',
            data: {},              
            success: function(data){
                $('#all-node-num').text(data);
            }
        });

        $.ajax({
            url: '?m=admin&c=User&a=getUserLoginNum',
            type: 'post',
            dataType: 'json',
            data: {},              
            success: function(data){
                var legendData = new Array();
                var seriesData = new Array();
                if (data) {
                    for (var i = 0; i < data.length; i++) {
                        legendData[i] = data[i]['name_zh'];
                        seriesData[i] = data[i]['login_num'];
                    }
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('activity-table'));
                    // 指定图表的配置项和数据
                    var option = {
                        tooltip: {},
                        legend: {
                            data:['登录次数']
                        },
                        xAxis: {
                            data: legendData,
                            axisLabel:{
                              interval: 0,
                              rotate: 45
                            }
                        },
                        yAxis: {},
                        series: [{
                            name: '登录次数',
                            type: 'bar',
                            data: seriesData
                        }]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            }
        });

        $.ajax({
            url: '?m=admin&c=Notice&a=getNoticesLimit',
            type: 'post',
            dataType: 'json',
            data: {},              
            success: function(data){
              if (data) {
                for (var i = 0; i < data.length; i++) {
                  var html = '<li class="list-group-item"><p class="mb-0 small text-secondary">[' 
                  + getdate(data[i].create_time) + '] <i class="bi bi-eye" onclick="showNotice(' + data[i].id + ')"></i></p> <p class="mb-0 text-truncate"><span class="badge bg-primary">' 
                  + data[i].tag + '</span> ' + data[i].title + '</p></li>';
                  $('#notice-list').append(html);
                }
                var more = '<li class="list-group-item"><a href="#" style="text-decoration:none;" onclick="checkBeforeJump(\'admin\', \'Notice\', \'index\')">更多...</a></li>';
                $('#notice-list').append(more)
              }
                
            }
        });

      });


    </script>
  </body>
</html>